<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户端首页图片列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery.qrcode.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-upload layui-form-item">
    <button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadimg"><i class="layui-icon"></i>上传图片</button>
    <div class="layui-inline layui-word-aux" style="margin-left: 10px">
        图片推荐尺寸 750 * 340，大小不能超过 1 M
    </div>
    <!--<div class="layui-upload-list" >-->
    <!--<img class="layui-upload-img" id="img" style="width: 410px;height: 300px">-->
    <!--<p id="demoText"></p>-->
    <!--</div>-->
</div>
<table class="layui-hide" id="images" lay-filter="images"></table>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table', 'layer', 'upload'], function () {
        var table = layui.table;
        var $ = layui.jquery, layer = layui.layer, upload = layui.upload; //独立版的layer无需执行这一句

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadimg'
            , url: '/refuse-web/api/indeximg/upload/'
            , size: 1024 //限制文件大小，单位 KB
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //上传成功
                if (res.code == 0) {
                    layer.msg("上传成功", {
                        icon: 1, time: 1000
                    }, function () {
                        window.location.reload();
                    });
                } else {
                    layer.msg('上传失败', {icon: 5, time: 1000});
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        table.render({
            elem: '#images'
            , url: '/refuse-web/api/indeximg/list'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', align: 'center', width: 110, title: '图片编号', sort: true}
                , {field: 'imguse', align: 'center', width: 110, title: '图片用途'}
                , {field: 'imgpage', align: 'center', width: 110, title: '图片页面', templet: '#pageFormat'}
                , {field: 'imghref', align: 'center', title: '图片链接'}
                , {field: 'imgnotice', align: 'center', title: '备注'}
                // , {field: 'imgurl', title: '图片地址'}
                , {field: 'imgurl', align: 'center', title: '图片', templet: '<div><img src="{{ d.imgurl}}"></div>'}
                , {align: 'center', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
            , loading: true
            , done: function (res, curr, count) {
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }
        });

        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                //alert($(this).attr('src'));
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:230px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: ['260px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px');
        }

        //监听工具条
        table.on('tool(images)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('确定删除吗，删除后不可恢复?', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/refuse-web/api/indeximg/delimg',
                        type: 'get',
                        datyaType: "json",
                        data: {'id': data.id},//向服务端发送删除的id
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 1, time: 1000
                                }, function () {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                });
                            } else {
                                layer.msg("删除失败", {icon: 5, time: 1000});
                            }
                            layer.close(index);
                        },
                        error: function (msg) {
                            layer.msg("服务器请求失败！", {icon: 5})
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '修改图片信息'
                    , area: ['500px', '450px']
                    , shade: 0
                    , maxmin: true
                    , content: 'updateimage.html?id=' + data.id
                    , btn: ['关闭'] //只是为了演示
                    , btn: function () {
                        layer.closeAll();
                    }
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });
    });
</script>
<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">配置</a>
    <!--<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-xs">编辑</button>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="showImg">
    <div><img class="layui-table-link" src="{{ d.imgurl}}"></div>
</script>
<script type="text/html" id="pageFormat">
    {{# if(d.imgpage==0){ }}
    首页
    {{# }else if(d.imgpage==1){ }}
    详情页
    {{# }else{ }}
    -
    {{# } }}
</script>

<!--layui.table图片显示不全，需重新定义CSS  -->
<!--<style type="text/css">
    .layui-table-cell {
        height: auto !important;
        white-space: normal;
    }
</style>-->
</body>
</html>
